<template>
  <div class="page_content daraBoardLint_content">
    <div class="header_box p-10 bold flex flex-ac flex-jsb">
      <div class="title bold">街道垃圾总量</div>
      <div class="dots flex flex-c flex-jc flex-ac">
        <span>.</span>
        <span>.</span>
        <span>.</span>
      </div>
    </div>
    <div class="main_box m-10">
      <div
        v-for="(item, inx) in streetList"
        :key="inx"
        class="main_box_item mb-15 flex flex-ac"
      >
        <div class="">{{ item.name }}：</div>
        <el-progress
          :text-inside="true"
          :format="format"
          :stroke-width="16"
          :percentage="item.garbage_weight"
          style="width: 74%"
          class="el-bg-inner-running"
        ></el-progress>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import {
  ref,
  computed,
  watch,
  onMounted,
  onBeforeUnmount,
  reactive,
  shallowRef,
  watchEffect,
} from "vue";
import { streetGarbageWeightApi } from "@/api/dataBoard";
import { getTotalDate } from "@/utils/auth";
import { useStore } from "vuex";
import * as echarts from "echarts";
const store = useStore();

const props = defineProps<{}>();
const streetList = ref([
  // {
  //   name: "园区xxx",
  //   value: 80,
  // },
]);
const format = (percentage) => {
  return `${percentage}吨`;
};
const timeType = computed(() => store.state.timeType); // 右上角的时间选择
watch(
  timeType,
  () => { 
    init();
  },
  {
    immediate: true,
  }
);
onMounted(() => { 
});
function init() {
  getStreetGarbageWeight();
}
// 数据看板_企业-街道垃圾总量
async function getStreetGarbageWeight() {
  let info = {
    timeType: timeType.value || 0,
  };
  const res = await streetGarbageWeightApi(info);
  console.log("数据看板_企业-街道垃圾总量", res);
  if (res.status != 200) return;
  streetList.value = res.data?.result || [];

}

onBeforeUnmount(() => {});
</script>

<style lang="scss" scoped>
.daraBoardLint_content {
  height: 400px;

  .header_box {
  }

  .main_box {
    height: calc(400px - 35px - 20px);
    overflow-y: auto;

    .main_box_item {
    }

    .main_box_item:last-child {
      margin-bottom: 0;
    }
  }
}

.main_box::v-deep {
  /* 渐变进度条 */
  .el-bg-inner-running .el-progress-bar__inner {
    background-color: unset;
    background-image: linear-gradient(to right, #1890ff, #7dd6ff) !important;
  }
}
</style>
<style lang="scss">
// .el-progress {
//   width: 100%;
// }
// .el-progress__text {
//   color: #fff;
//   font-size: 14px;
// }
// .el-progress-bar__outer {
//   height: 12px !important;
//   border: 1px solid #78335f;
//   background-color: transparent;
// }
</style>